<template>
 <div class="xs-echarts-oner" id="oner"></div>
</template>

<script>

import echarts from "echarts";
export default {
  components: {
    
  },
  props: {},
  data() {
    return {
   
    myChart:null,
      option:{},
      fontColor:null
    };
  },
  watch: {},
  computed: {},
  methods: {
    oner(){
        
//     
var myChart = echarts.init(document.getElementById("oner"));
      this.placeHoledStyle = {
        normal: {
          barBorderColor: "rgba(0,0,0,0)",
          color: "rgba(0,0,0,0)"
        },
        emphasis: {
          barBorderColor: "rgba(0,0,0,0)",
          color: "rgba(0,0,0,0)"
        }
      };
      this.dataStyle = {
        normal: {
          label: {
            show: true,
            position: "insideLeft",
            formatter: "{c}"
          }
        }
      };

      this.option = {
        backgroundColor: "rgba(0,0,0,0)",
        title: {
          text: "精深加工",
          textStyle: {
            color: "#fff",
            font: "10px Microsoft YaHei",
            fontWeight:'normal',
          
          },
          x: "center",
          y: "3%"
        
        },
        color: [
          "#EAEA26",
          "#906BF9",
          "#FE5656",
          "#01E17E",
          "#3DD1F9"
        ],
        legend:{
         type: "",
          orient: "horizontal",
          // x: "right",
          top: "90%",
          left: "18%",
          // bottom: "0%",
          itemWidth: 13,
          itemHeight: 8,
          itemGap: 16,
          textStyle: {
            color: "#A3E2F4",
            fontSize: 13,
            fontWeight: 0
          },
          data:['干红葡萄酒','萄汁','苹果汁','大麦若叶青汁','草莓酒']
        },

        grid: {
          left: -100,
          top: 50,
          bottom: 10,
          right: 10,
          containLabel: true
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
   
        polar: {},
        angleAxis: {
          interval: 1,
          type: "category",
          data: [],
          z: 10,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#0B4A6B",
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            interval: 0,
            show: true,
            color: "#0B4A6B",
            margin: 8,
            fontSize: 16
          }
        },
        radiusAxis: {
          min: 40,
          max: 120,
          interval: 20,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#0B3E5E",
              width: 2,
              type: "solid"
            }
          },
          axisLabel: {
            formatter: "{value} %",
            show: false,
            padding: [0, 0, 20, 0],
            color: "#0B3E5E",
            fontSize: 16
          },
          splitLine: {
            lineStyle: {
              color: "#0B3E5E",
              width: 1,
              type: "solid"
            }
          }
        },
        calculable: true,
        series: [
          {
            //里圈
            type: "pie",
            radius: ["0%", "4%"], //这里
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 10,
                length2: 20
              },
              emphasis: {
                show: false
              }
            },
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#0B4A6B"
                  }
                }
              }
            ]
          },
          {
            //最外圈
            type: "pie",
            radius: ["60%", "55%"], //这里
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 10,
                length2: 35
              },
              emphasis: {
                show: false
              }
            },
            name: "",
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#0B4A6B"
                  }
                }
              }
            ]
          },
          {
            //扇形
            stack: "a",
            type: "pie",
            radius: ["5%", "50%"], //这里
            roseType: "area",
            zlevel: 10,
            label: {
              normal: {
                show: true,
                formatter: "{d}%",
                textStyle: {
                  fontSize: 15
                },
                position: "outside"
              },
              emphasis: {
                show: true
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 30
              },
              emphasis: {
                show: false
              }
            },
       data: [{
                value: 916,
                name: '干红葡萄酒'
            },
            {
                value: 689,
                name:  '萄汁' 
            },
            {
                value: 1769,
                name:  '苹果汁'
            },
            {
                value: 1026,
                name: '大麦若叶青汁'
            },
            {
                value: 590,
                name:  '草莓酒'
            },
          
        ]
          }
        ]
      };

      myChart.setOption(this.option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  },
  created() {},
  mounted() {
    this.$nextTick(function() {
     
      this.oner();
    });
  }
};
</script>
<style lang="scss">
.xs-echarts-oner{
  height: 400px;
  width: 100%;
}
</style>